import {
  Button, Popover, Tag, Tooltip,
  message
} from 'antd';

import { ReloadOutlined, BarsOutlined } from '@ant-design/icons';
// 引入模态框
import MyModal from '../components/Modal'
// 引入模态框所展示内容
import Info from '../components/Info/AgencyPayOrder/AgencyPayOrder'

import {
  viewPaymentOrderDetailed,
} from './../API'

// 商户名称列表 用于渲染搜索区 商户名称下拉框
export let merchantNameList = [
  { id: 1, name: 'test1' },
  { id: 2, name: 'test2' },
  { id: 3, name: 'test3' }
]
// 订单状态列表 用于渲染搜索区 订单状态下拉框
export let orderStatusList = [
  { id: 1, status: '未处理' },
  { id: 2, status: '已审核' },
  { id: 3, status: '转帐中' },
  { id: 4, status: '已代付' },
  { id: 5, status: '已拒绝' }
]
// 回调状态列表 用于渲染搜索区 回调状态下拉框
export let callbackStatusList = [
  { id: 1, status: '未回调' },
  { id: 2, status: '已回调' },
  { id: 3, status: '已失败' }
]


// 弹出层数据
export let modalData = [
  { id: 1, title: '系统订单号', value: 'DF20220330135807739075' },
  { id: 2, title: '商户订单号', value: 'SH_20220330135807201230' },
  { id: 3, title: '商户名称', value: '123456' },
  { id: 4, title: '银行名称', value: '杰哥' },
  { id: 5, title: '银行卡号', value: '987466975' },
  { id: 6, title: '持卡人姓名', value: '彭弄' },
  { id: 7, title: '手续费', value: '8' },
  { id: 8, title: '实付金额', value: '123' },
  { id: 9, title: '代付通道', value: 'MANUAL_BANK' },
  { id: 10, title: '订单状态', value: '未代付' },
  { id: 11, title: '回调状态', value: '未回调' },
  { id: 12, title: '回调地址', value: '' },
  { id: 13, title: '商户备注', value: '' },
  { id: 14, title: '系统备注', value: '' },
  { id: 15, title: '代付时间', value: '' },
  { id: 16, title: '回调时间', value: '' },
  { id: 17, title: '创建时间', value: '2022-03-30 13:58:07' }
]


// 表头 title
export let columns = [
  {
    title: '系统订单号',
    dataIndex: 'system_order_number',
    key: 'system_order_number',
    width: 200,
    fixed: 'left',
    ellipsis: {
      showTitle: false,
    },
    render: system_order_number => (
      <Tooltip placement="topLeft" title={system_order_number}>
        {system_order_number}
      </Tooltip>
    ),
  },
  {
    width: 200,
    title: '代付订单ID',
    dataIndex: 'payment_orderID',
    key: 'payment_orderID',
    // sorter: true,
    sorter: (a, b) => a.payment_orderID.substr(-5, 5) - b.payment_orderID.substr(-5, 5),
    sortDirections: ['ascend', 'descend'],
    ellipsis: {
      showTitle: false,
    },
    render: payment_orderID => (
      <Tooltip placement="topLeft" title={payment_orderID}>
        {payment_orderID}
      </Tooltip>
    ),
  },
  {
    width: 200,
    title: '商户订单号',
    dataIndex: 'Merchant_order_number',
    key: 'Merchant_order_number',
    ellipsis: {
      showTitle: false,
    },
    render: Merchant_order_number => (
      <Tooltip placement="topLeft" title={Merchant_order_number}>
        {Merchant_order_number}
      </Tooltip>
    ),
  },
  {
    width: 120,
    title: '代付状态',
    dataIndex: 'payment_status',
    key: 'payment_status',
    render: payment_status => {
      return (
        <Tag color={handleColor(payment_status)} key={payment_status}>
          {payment_status}
        </Tag>
      );
    },
  },
  {
    width: 120,
    title: '商户名称',
    dataIndex: 'merchant_name',
    key: 'merchant_name',
  },
  {
    width: 150,
    title: '银行名称',
    dataIndex: 'bank_name',
    key: 'bank_name',
  },
  {
    width: 160,
    title: '银行卡号',
    dataIndex: 'bank_card_number',
    key: 'bank_card_number',
  },
  {
    width: 150,
    title: '收款人姓名',
    dataIndex: 'payee_name',
    key: 'payee_name',
  },
  {
    width: 120,
    title: '实付金额',
    dataIndex: 'paid_in_amount',
    key: 'paid_in_amount',
  },
  {
    width: 120,
    title: '手续费',
    dataIndex: 'service_charge',
    key: 'service_charge',
  },
  {
    width: 150,
    title: '扣除金额',
    dataIndex: 'deduction_amount',
    key: 'deduction_amount',
  },
  {
    width: 150,
    title: '受理人',
    dataIndex: 'receiver',
    key: 'receiver',
  },
  {
    width: 150,
    title: '卡商',
    dataIndex: 'card_dealer',
    key: 'card_dealer',
  },
  {
    width: 150,
    title: '回调状态',
    dataIndex: 'callback_status',
    key: 'callback_status',
    render: callback_status => {
      let color = callback_status === '未回调' ? '#f50' : '#108ee9';
      return (
        <Tag color={color} key={callback_status}>
          {callback_status}
        </Tag>
      );
    },
  },
  {
    width: 200,
    title: '创建时间',
    dataIndex: 'creation_time',
    key: 'creation_time',
  },
  {
    width: 200,
    title: '受理时间',
    dataIndex: 'acceptance_time',
    key: 'acceptance_time',
  },
  {
    width: 200,
    title: '代付时间',
    dataIndex: 'Payment_time',
    key: 'Payment_time',
  },
  {
    width: 200,
    title: '回调时间',
    dataIndex: 'callback_time',
    key: 'callback_time',
  },
  {
    width: 150,
    title: 'IP',
    dataIndex: 'IP',
    key: 'IP',
  },
  {
    width: 150,
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    fixed: 'right',
    render: (text, record, index,) => {
      return (
        <Popover
          placement="bottomRight"
          trigger="click"
          content={operationData}
        >
          <Button
            type='primary'
            onClick={() => operationBtn(record.dfId)}
          >
            操作
          </Button>
        </Popover>
      )
    }
  },
];

// 根据订单状态选择 颜色
const handleColor = (status) => {
  // payment_status === '' ? '' : ''
  switch (status) {
    case '已拒绝':
      return '#FF4D4F'
    case '已代付':
      return '#108ee9'
    case '未处理':
      return '#f50'
    case '已审核':
      return '#3eca69'
    case '转帐中':
      return '#99BB33'
    default:
      break;
  }
}


// antd 消息提示全局配置
message.config({
  top: 240, //消息距离顶部的位置
  duration: 1, //自动关闭时间
  maxCount: 2, //最大显示数, 超过限制时，最早的消息会被自动关闭
})

// 操作按钮点击事件
const operationBtn = (data) => {
  // console.log('操作按钮点击事件');
  // console.log(data);
  viewPaymentOrderDetailed({
    id: data
  }).then(res => {
    let resData = res.data
    modalData = [
      { id: 1, title: '系统订单号', value: resData.liuShuiHao },
      { id: 2, title: '商户订单号', value: resData.liuShuiHao },
      { id: 3, title: '商户名称', value: resData.shangHuName },
      { id: 4, title: '银行名称', value: resData.yinHangKa.yinHangName },
      { id: 5, title: '银行卡号', value: resData.yinHangKa.yinHangKaHao },
      { id: 6, title: '持卡人姓名', value: resData.yinHangKa.chiKaName },
      { id: 7, title: '手续费', value: resData.tiXianShouXvFei },
      { id: 8, title: '实付金额', value: resData.shiFuJinE },
      { id: 9, title: '代付通道', value: 'MANUAL_BANK' },
      { id: 10, title: '订单状态', value: resData.daiFuZhuangTai },
      { id: 11, title: '回调状态', value: '未回调' },
      { id: 12, title: '回调地址', value: '' },
      { id: 13, title: '商户备注', value: resData.beiZhu },
      { id: 14, title: '系统备注', value: resData.beiZhu },
      { id: 15, title: '代付时间', value: resData.daiFuShiJian },
      { id: 16, title: '回调时间', value: '' },
      { id: 17, title: '创建时间', value: resData.createTime }
    ]
  })
}
// 回调按钮点击事件
const callbackBtn = () => {
  message.success('回调成功')
}

// 操作按钮数据
let operationData = (
  <div style={{ 'width': '80px' }}>
    <MyModal
      type='text'
      block
      icon={<BarsOutlined />}
      title='查看代付订单'
      btntext='查看'
    >
      <Info modalData={modalData}></Info>
    </MyModal>
    <Button type='text' block icon={<ReloadOutlined />} onClick={callbackBtn}>回调</Button>
  </div>
);

// 代付订单数据 
export let paymentOrderData = [
  {
    key: 1,
    system_order_number: 'DF20220329124416286268',//系统订单号
    payment_orderID: 'SYSTEM20220329160117208840qqw',//代付订单ID
    Merchant_order_number: 'SH_20220329160117367368',//商户订单号
    payment_status: '已代付',//代付状态
    merchant_name: 'test1',//商户名称
    bank_name: '中国银行',//银行名称
    bank_card_number: '123456789',//银行卡号
    payee_name: 'test',//收款人姓名
    paid_in_amount: '200',//实付金额
    service_charge: '16',//手续费
    deduction_amount: '216',//扣除金额
    receiver: 'test',//受理人
    card_dealer: 'test',//卡商
    callback_status: 'test',//回调状态
    creation_time: '2022-03-29 16:01:17',//创建时间
    acceptance_time: '2022-03-29 16:01:45',//受理时间
    Payment_time: '2022-03-29 16:01:49',//代付时间
    callback_time: '',//回调时间
    IP: '182.148.59.92',//IP
    operation: '',//操作
  },
  {
    key: 2,
    system_order_number: 'DF20220329124416286268',//系统订单号
    payment_orderID: 'SYSTEM20220329160117208840',//代付订单ID
    Merchant_order_number: 'SH_20220329160117367368',//商户订单号
    payment_status: '已拒绝',//代付状态
    merchant_name: 'test1',//商户名称
    bank_name: '中国银行',//银行名称
    bank_card_number: '123456789',//银行卡号
    payee_name: 'test',//收款人姓名
    paid_in_amount: '200',//实付金额
    service_charge: '16',//手续费
    deduction_amount: '216',//扣除金额
    receiver: 'test',//受理人
    card_dealer: 'test',//卡商
    callback_status: 'test',//回调状态
    creation_time: '2022-03-29 16:01:17',//创建时间
    acceptance_time: '2022-03-29 16:01:45',//受理时间
    Payment_time: '2022-03-29 16:01:49',//代付时间
    callback_time: '',//回调时间
    IP: '182.148.59.92',//IP
    operation: '',//操作
  },
]

// 表格行是否可选择
export let rowSelection = {
  type: 'checkbox',//多选
  fixed: true,//把选择框列固定在左边
}
